<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">添加课程</block>
		</cu-custom>
		<view class="form">
			<view>
				<van-field v-model="course.name" @change="course.name = $event.detail" required clearable label="课程名称"
					icon="question-o" placeholder="请输入课程名称" input-align="right"
					placeholder-style="color:#eeeeee;font-size:30rpx;" />
			</view>
			<view @click="this.show1=true">
				<van-field v-model="course.week" @change="course.week = $event.detail" required clearable readonly
					label="上课周期" icon="question-o" placeholder="请输入上课周期" input-align="right"
					placeholder-style="color:#eeeeee;font-size:30rpx;" />
			</view>
			<view @click="this.show=true">

				<van-field v-model="time" @change="time = $event.detail" label="上课时间" readonly required border=false
					placeholder="请选择上课时间" input-align="right" icon="question-o"
					placeholder-style="color:#eeeeee;font-size:30rpx;" />
			</view>
			<view>
				<van-field v-model="course.address" @change="course.address = $event.detail" required clearable
					label="上课地点" icon="question-o" placeholder="请输入上课地点" input-align="right"
					placeholder-style="color:#eeeeee;font-size:30rpx;" />
			</view>
			<view>
				<van-field v-model="course.teacher" @change="course.teacher = $event.detail" required clearable
					label="任课教师" icon="question-o" placeholder="请输入任课教师" input-align="right"
					placeholder-style="color:#eeeeee;font-size:30rpx;" />

			</view>

			<view style="margin-top: 30rpx;" @click="save"><van-button type="warning" round style="margin-left: 400rpx;"
					custom-style='width:200rpx;font-size:40rpx; '>保存</van-button></view>
		</view>
		<van-popup :show="show" position="bottom" @close="!show" :round="true">
			<van-picker ref="mypicker" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="cancel"
				@change="onChange" />
		</van-popup>
		<van-popup :show="show1" position="bottom" @close="onclose" :round="true" custom-style='height:300rpx' closeable
			integer>
			<view class="popupstyle">
				<view class="switch__title">选择周期</view>
				<view class="switch__content">
					<view class="textstyle">第</view>
					<van-stepper min="1" max="20" @change="onChange1" v-model="value1" />
					<view class="textstyle">周</view>
					<van-icon name="minus" size='50rpx' />
					<view class="textstyle">第</view>
					<van-stepper :min="value1" max="20" @change="onChange2" v-model="value2" />
					<view class="textstyle">周</view>
				</view>
			</view>

		</van-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_course', ['courseinfo']),
			...mapState('m_user', ['token'])
		},
		data() {
			return {
				value1: '',
				value2: '',
				course: {
					name: '',
					week: '',
					begin: '',
					end: '',
					teacher: '',
					address: "",
					day: ''
				},
				second: 2,
				show: false,
				show1: false,
				time: '',
				oldcolumns: ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节', '第七节', '第八节', '第九节', '第十节', '第十一节', '第十二节'],
				columns: [{
						values: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
						className: 'column1',
						defaultIndex: 0,
					},
					{
						values: ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节', '第七节', '第八节', '第九节', '第十节', '第十一节', '第十二节'],
						className: 'column1',
						defaultIndex: 0,
					},
					{
						values: ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节', '第七节', '第八节', '第九节', '第十节', '第十一节', '第十二节'],
						className: 'column2',
						defaultIndex: 0,
					},
				],

			};
		},
		onLoad() {
			this.value1 = 1
			this.value2 = 1
		},
		methods: {
			...mapMutations('m_course', ['updateCourseInfo']),
			async getcourse() {
				const data = await uni.$http.get('/get/getcourse')
				if (data.data.status === 0) {
					data.data.data.forEach(course => {
						course.color = this.getRandomColor();
					});
					this.updateCourseInfo(data.data.data)
				}
			},
			getRandomColor() {
				let r = Math.floor(Math.random() * 256); // 生成随机的红色值（0-255）
				let g = Math.floor(Math.random() * 256); // 生成随机的绿色值（0-255）
				let b = Math.floor(Math.random() * 256); // 生成随机的蓝色值（0-255）
				return "rgb(" + r + ", " + g + ", " + b + ")";
			},
			onConfirm(e) {
				this.show = false
				this.columns[2].values = this.oldcolumns.slice()
				this.course.day = e.detail.index[0] + 1
				this.course.begin = e.detail.index[1] + 1
				this.course.end = e.detail.index[2] + this.course.begin

				this.time = e.detail.value[0] + " " + e.detail.value[1] + "-" + e.detail.value[2]
				const picker = this.$refs.mypicker;
				const indexes = Array(3).fill(0);
				picker.setIndexes(indexes);

			},
			onChange(e) {
				if (e.detail.index == 1) {
					this.columns[2].values = this.oldcolumns.slice()
					let index = this.columns[1].values.indexOf(e.detail.value[1]);
					this.columns[2].values.splice(0, index)
				}
			},
			async save() {
				if (!this.course.address || !this.course.begin || !this.course.day || !this.course.end || !this.course
					.name || !this.course.teacher || !this.course.week) {
					uni.showToast({
						icon: 'error',
						title: '信息不全!!'
					})
					return
				}

				const array = [...this.courseinfo]
				array.push(this.course)
				const data = await uni.$http.post('/update/updatecourseinfo', {
					courseinfo: array
				})
				if (data.data.status === 0) {
					this.getcourse()
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '添加成功!',
							icon: 'success',
							duration: 1000
						});
						if (this.second <= 0) {
							clearInterval(timer)
							uni.navigateBack()
							return
						}
						uni.showToast({
							title: '添加成功！',
							icon: 'success',
							duration: 1000
						});
					}, 1000)

				} else {
					this.show = false
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}

			},
			cancel() {
				this.show = false
				const picker = this.$refs.mypicker;
				const indexes = Array(3).fill(0);
				picker.setIndexes(indexes);
				this.columns[2].values = this.oldcolumns.slice()
			},
			onChange1(e) {
				this.value1 = e.detail
			},
			onChange2(e) {
				this.value2 = e.detail
			},
			onclose() {
				this.show1 = false
				this.course.week = this.value1.toString() + "-" + this.value2.toString()
			}
		},
	}
</script>

<style lang="less">
	.form {
		margin: 50rpx;

		.item {
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 40rpx;
			border-bottom: 1px solid #eee;

			input {
				margin-top: 10rpx;
				height: 100rpx;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}

			.detail {
				color: #eeeeee;
				font-size: 30rpx;
				margin-left: 230rpx;
			}
		}
	}

	.popupstyle {
		padding-top: 30rpx;
		font-size: 34rpx;
		text-align: center;

		.switch__title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
		}

		.switch__content {
			display: flex;
			align-content: center;
			justify-content: center;
			padding-top: 30rpx;

			.textstyle {
				margin-top: 8rpx;
			}
		}
	}
</style>